<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <!--需要在Javascript之前引入JQuer-->
    <script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <!--针对移动设备的样式，为了确保适当的绘制和触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--jquery.cookie.js-->
    <script src="../static/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="../static/css/pagination.css">
    <script src="../static/js/pagination.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0 200px;">
    <div class="row-fluid jumbotron">
        <div class="span12">

            <div class="row-fluid">
                <div class="span12">
                    <span style="float: right;">
                         <a href="/content/detail">
                             <span class="glyphicon glyphicon-home"> 首页</span>
                         </a>
                    </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="page-header">
                                <a id="modal-968973" href="/userlist" role="button" class="btn" data-toggle="modal">
                                <h1>
                                    用户列表
                                </h1>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="" style="float: right;">
                                <input maxlength="10" size="35" class="input-medium search-query" type="text" placeholder="输入用户ID、姓名、性别的相关信息......"/>
                                <button class="btn" id="oneId" onclick="FuzzyQspage(1)">查找</button>
                            </div>
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#">首页</a>
                                </li>
                                <li>
                                    <a href="#">资料</a>
                                </li>
                                <li class="disabled">
                                    <a href="#" id="count">总数<span class="badge pull-right">0</span></a>
                                </li>

                            </ul>
                            <table class="table table-hover  table-striped" id="msgList">
                                <thead>
                                <tr>

                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        姓名
                                    </th>
                                    <th>
                                        性别
                                    </th>
                                    <th>
                                        登录时间
                                    </th>
                                    <th>
                                        注册时间
                                    </th>
                                    <th>
                                        状态
                                    </th>
                                    <th>
                                        注销
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div id="pages">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script >
    //模糊查询用户
    function  FuzzyQspage(currentPage) {
        var val = $(".search-query").val();
        if (val.length != 0) {
            $("#msgList tbody").empty();
            pageSize = 10;
            offset = (currentPage - 1) * pageSize
            offset = offset < 1 ? 0 : offset;
            var messageListUrl = "/user/fuzzy?offset=" + offset + "&limit=" + pageSize +"&val=" + val
            $.get(messageListUrl, function (RspData, status) {
                console.log(RspData)
                console.log(status)
                if (RspData.count > 0) {
                    totalPages = Math.ceil(RspData.count / pageSize)
                    console.log("status", totalPages)
                    new Pagination({
                        element: '#pages',
                        type: 1,
                        pageIndex: currentPage,
                        pageSize: 10,
                        total: RspData.count,
                        jumper: true,
                        singlePageHide: false,
                        prevText: '上一页',
                        nextText: '下一页',
                        disabled: true,
                        currentChange: function (index) {
                            // console.log(index);
                            FuzzyQspage(index)
                        }
                    });
                    //显示总数量
                    $("#count span").html(RspData.count);
                    console.log("status")
                    var trhtml =""
                    for ( var i in RspData.data) {
                        var Id = RspData.data[i].Userid;
                        var hrfUp = "/user?status=1&id=" + Id;
                        //状态判断
                        var sta = RspData.data[i].Status;
                        var staChar = "<font color='green'>已禁言</font>";
                        if (sta == "0"){
                            staChar = "<font color='green'>已激活</font>"
                        }
                        // console.log(byId2)
                        trhtml += "<tr id='trone'>" +
                            "<td>"+RspData.data[i].Userid+"</td>" +
                            "<td>"+RspData.data[i].Name+"</td>" +
                            "<td>"+RspData.data[i].Sex+"</td>" +
                            "<td>"+RspData.data[i].Logindate+"</td>" +
                            "<td>"+RspData.data[i].Regtime+"</td>" +
                            "<td>"+staChar+"|" +
                            "<a class=\"btn\" href=\"#\" onclick='Sort("+RspData.data[i].Status+","+RspData.data[i].Userid+")'>" +
                            "<span class=\"glyphicon glyphicon-sort\" style=\"color: rgb(65, 93, 226);\">"+
                            "</span>"+
                            "</a>"+
                            "</td>" +
                            "<td>"+
                            "<a href="+hrfUp+">"+
                            "<span class='glyphicon glyphicon-pencil'>"+
                            "</span>"+
                            "</a>"+
                            "</td>" +
                            "</td>" +
                            "</tr>";
                    }
                    $("#msgList tbody").html(trhtml);
                }else {
                    alert("你输入的信息，我们查询不到任何东西哦！");
                }
            });
        }
    }
    //获取页面数据
    pageAutoLoadData(1);
    function  pageAutoLoadData(currentPage) {
        $("#msgList tbody").empty();
        pageSize =10;
        offset = (currentPage-1)*pageSize
        offset = offset<1 ? 0 :offset;
        var messageListUrl ="/user/list?offset="+offset+"&limit="+pageSize
        $.get(messageListUrl, function(RspData, status) {
            console.log(RspData)
            console.log(status)
            if (RspData.count>0) {
                totalPages = Math.ceil( RspData.count/pageSize)
                console.log("status",totalPages)
                new Pagination({
                    element: '#pages',
                    type: 1,
                    pageIndex: currentPage,
                    pageSize: 10,
                    total: RspData.count,
                    jumper: true,
                    singlePageHide: false,
                    prevText: '上一页',
                    nextText: '下一页',
                    disabled: true,
                    currentChange: function(index) {
                        // console.log(index);
                        pageAutoLoadData(index)
                    }
                });

            }
            //显示总数量
            $("#count span").html(RspData.count);
            console.log("status")
            var trhtml =""
            for ( var i in RspData.data) {
                var Id = RspData.data[i].Userid;
                var hrfUp = "/user?status=1&id=" + Id;
                //状态判断
                var sta = RspData.data[i].Status;
                var staChar = "<font color='red'>已禁言</font>";
                if (sta == "0"){
                    staChar = "<font color='green'>已激活</font>"
                }
                // console.log(byId2)
                trhtml += "<tr id='trone'>" +
                    "<td>"+RspData.data[i].Userid+"</td>" +
                    "<td>"+RspData.data[i].Name+"</td>" +
                    "<td>"+RspData.data[i].Sex+"</td>" +
                    "<td>"+RspData.data[i].Logindate+"</td>" +
                    "<td>"+RspData.data[i].Regtime+"</td>" +
                    "<td>"+staChar+"|" +
                    "<a class=\"btn\" href=\"#\" onclick='Sort("+RspData.data[i].Status+","+RspData.data[i].Userid+")'>" +
                    "<span class=\"glyphicon glyphicon-sort\" style=\"color: rgb(65, 93, 226);\">"+
                    "</span>"+
                    "</a>"+
                    "</td>" +
                    "<td>"+
                    "<a href="+hrfUp+">"+
                    "<span class='glyphicon glyphicon-pencil'>"+
                    "</span>"+
                    "</a>"+
                    "</td>" +
                    "</td>" +
                    "</tr>";
            }
            $("#msgList tbody").html(trhtml);
        });

    }
    //修改状态
    function Sort(num,id) {
        var EditUrl ="/user/status/edit?num="+num+"&id="+id;
        $.post(EditUrl,function () {
            alert("修改成功！");
            window.location.reload();
        })
    }
    //删除用户
    function Trash(id) {
        var delUrl = "/user/del?id="+id;
        $.post(delUrl,function (success) {
            alert("注销成功！");
            window.location.reload();
        })
    }
</script>
</html>